<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<view class="header-content">
				<text class="title">用药提醒</text>
				<text class="subtitle">为父母设置定时用药提醒</text>
			</view>
		</view>

		<!-- 提醒列表 -->
		<view class="alarm-list">
			<text class="section-title">当前提醒</text>
			<view class="alarm-item" v-for="(alarm, index) in alarms" :key="alarm.id">
				<view class="alarm-info">
					<text class="alarm-time">{{alarm.time}}</text>
					<text class="alarm-name">{{alarm.medicineName}}</text>
					<text class="alarm-dose">{{alarm.dose}}</text>
				</view>
				<view class="alarm-actions">
					<view class="action-btn edit" @tap="openEdit(index)">
						<text class="btn-text">编辑</text>
					</view>
					<view class="action-btn delete" @tap="removeAlarm(index)">
						<text class="btn-text">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加按钮 -->
		<view class="add-alarm-btn" @tap="openAdd">
			<text class="add-text">+ 添加提醒</text>
		</view>

		<!-- 弹窗：新增/编辑 -->
		<view class="modal" v-if="showModal" @tap="closeModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">{{editingIndex === -1 ? '添加' : '编辑'}}用药提醒</text>
					<text class="modal-close" @tap="closeModal">×</text>
				</view>
				<view class="modal-body">
					<!-- 时间选择：24小时轮盘 -->
					<view class="form-item">
						<text class="form-label">提醒时间</text>
						<picker-view class="time-picker" :value="timePickerValue" indicator-style="height: 48px;" @change="onTimeChange">
							<picker-view-column>
								<view class="picker-item" v-for="h in 24" :key="'h'+h">{{pad(h-1)}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="m in 60" :key="'m'+m">{{pad(m-1)}}</view>
							</picker-view-column>
						</picker-view>
					</view>

					<!-- 药品名称 -->
					<view class="form-item">
						<text class="form-label">药品名称</text>
						<input class="form-input" v-model="form.medicineName" placeholder="请输入药品名称" />
					</view>

					<!-- 用量 -->
					<view class="form-item">
						<text class="form-label">用量</text>
						<input class="form-input" v-model="form.dose" placeholder="如：1片 / 5ml" />
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel" @tap="closeModal">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm" @tap="saveAlarm">
						<text class="btn-text">保存</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alarms: [
					{ id: 1, time: '09:00', medicineName: '降压药', dose: '1片' },
					{ id: 2, time: '21:30', medicineName: '维生素D', dose: '1粒' }
				],
				showModal: false,
				editingIndex: -1,
				form: { time: '09:00', medicineName: '', dose: '' },
				timePickerValue: [9, 0] // [hour, minute]
			}
		},
		methods: {
			pad(n) { return (n < 10 ? '0' : '') + n; },
			openAdd() {
				this.editingIndex = -1;
				this.form = { time: '09:00', medicineName: '', dose: '' };
				this.timePickerValue = [9, 0];
				this.showModal = true;
			},
			openEdit(index) {
				this.editingIndex = index;
				const a = this.alarms[index];
				this.form = { time: a.time, medicineName: a.medicineName, dose: a.dose };
				const [h, m] = a.time.split(':').map(Number);
				this.timePickerValue = [h, m];
				this.showModal = true;
			},
			removeAlarm(index) {
				this.alarms.splice(index, 1);
			},
			closeModal() { this.showModal = false; },
			onTimeChange(e) {
				const [h, m] = e.detail.value;
				this.form.time = `${this.pad(h)}:${this.pad(m)}`;
			},
			saveAlarm() {
				if (!this.form.medicineName) {
					uni.showToast({ title: '请输入药品名称', icon: 'none' });
					return;
				}
				if (this.editingIndex === -1) {
					this.alarms.push({ id: Date.now(), ...this.form });
				} else {
					this.$set(this.alarms, this.editingIndex, { ...this.alarms[this.editingIndex], ...this.form });
				}
				this.closeModal();
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f9f7f7 0%, #eaf4f4 100%);
		animation: pageLoad 0.6s ease-out;
	}

	@keyframes pageLoad {
		0% {
			opacity: 0;
			transform: translateY(20rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.header {
		background: linear-gradient(135deg, #66bb6a, #43a047);
		padding: 60rpx 30rpx 40rpx;
	}
	.header-content { text-align: center; }
	.title { display: block; font-size: 48rpx; font-weight: bold; color: #fff; margin-bottom: 10rpx; }
	.subtitle { font-size: 28rpx; color: rgba(255,255,255,0.85); }

	.alarm-list {
		margin: 30rpx;
		opacity: 0;
		animation: fadeIn 0.5s ease-out 0.3s forwards;
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
			transform: translateY(10rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.section-title { display: block; font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; }
	.alarm-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.alarm-item:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	.alarm-info { display: flex; flex-direction: column; gap: 6rpx; }
	.alarm-time { font-size: 36rpx; color: #667eea; font-weight: bold; }
	.alarm-name { font-size: 30rpx; color: #333; }
	.alarm-dose { font-size: 26rpx; color: #666; }
	.alarm-actions { display: flex; gap: 16rpx; }
	.action-btn {
		padding: 16rpx 24rpx;
		border-radius: 10rpx;
		transition: all 0.3s ease;
		touch-action: manipulation;
	}
	.action-btn.edit {
		background: #e3f2fd;
	}
	.action-btn.edit:active {
		background: #bbdefb;
	}
	.action-btn.delete {
		background: #ffebee;
	}
	.action-btn.delete:active {
		background: #ffcdd2;
	}
	.btn-text { font-size: 26rpx; color: #333; }

	.add-alarm-btn {
		margin: 30rpx;
		background: linear-gradient(135deg, #66bb6a, #43a047);
		border-radius: 16rpx;
		padding: 36rpx;
		text-align: center;
		box-shadow: 0 8rpx 24rpx rgba(102, 187, 106, 0.25);
		transition: all 0.3s ease;
		animation: fadeIn 0.5s ease-out 0.5s forwards;
		opacity: 0;
	}

	.add-alarm-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(102, 187, 106, 0.2);
	}
	.add-text { color: #fff; font-size: 32rpx; font-weight: bold; }

	/* 弹窗 */
	.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
	.modal-content { width: 640rpx; background: #fff; border-radius: 18rpx; overflow: hidden; }
	.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 26rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
	.modal-title { font-size: 34rpx; font-weight: bold; color: #333; }
	.modal-close { font-size: 44rpx; color: #999; }
	.modal-body { padding: 26rpx 30rpx; }
	.form-item { margin-bottom: 26rpx; }
	.form-label { display: block; font-size: 28rpx; color: #333; margin-bottom: 12rpx; }
	.form-input { width: 100%; height: 80rpx; border: 2rpx solid #e0e0e0; border-radius: 10rpx; padding: 0 20rpx; font-size: 28rpx; }
	.time-picker { width: 100%; height: 300rpx; background: #fafafa; border-radius: 12rpx; }
	.picker-item { height: 48px; line-height: 48px; text-align: center; font-size: 32rpx; }
	.modal-footer { display: flex; border-top: 1rpx solid #f0f0f0; }
	.modal-btn { flex: 1; text-align: center; padding: 26rpx; }
	.modal-btn.confirm {
		background: linear-gradient(135deg, #66bb6a, #43a047);
	}

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #3d5a80;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 16rpx;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #66bb6a, #43a047);
		border-radius: 4rpx;
	}
	.modal-btn.confirm .btn-text { color: #fff; }
</style>


